<!DOCTYPE html>
<html>
<head>
<title>Contact Search</title>
<meta name="viewport" 
      content="width=device-width, initial-scale=1">	
<link rel="stylesheet" 
      href="css/jquery.mobile-1.4.5.min.css" />
<script type="text/javascript" 
        src="js/jquery-2.1.3.min.js">
</script>
<script type="text/javascript" 
        src="js/jquery.mobile-1.4.5.min.js">
</script>
<script src="phonegap.js"></script>
<script>
document.addEventListener("deviceready", onDeviceReady, false);	

function onDeviceReady(){

	$("#searchButton").on("touchend", function() {
		var search = $.trim($("#search").val());
		if(search == "") return;
		
		var opt = new ContactFindOptions();
		opt.filter = search;
		opt.multiple = true;
		navigator.contacts.find(["displayName","emails"], foundContacts, errorContacts, opt);
	});

	foundContacts = function(matches){
		//create results in our list
		var s = "";
		for (var i = 0; i < matches.length; i++) {
			s += "<li>"+matches[i].displayName+"</li>";
		}
		$("#results").html(s);
		$("#results").listview("refresh");
	}

	errorContacts = function(err){
		navigator.notification.alert("Sorry, we had a problem and gave up.", function() {});
	}	
}

</script>
</head>

<body>

<div data-role="page">

		<div data-role="header">
			<h1>Contact Search</h1>
		</div>
		
		<div role="main" class="ui-content">

            <input type="search" id="search" value=""  />            
			<button id="searchButton">Search</button>
			
            <ul id="results" data-role="listview" data-inset="true"></ul>

		</div>	

		
	</div>

</div>

</body>
</html>
